Vue3+Vue Router跳转相同路由监听页面刷新并执行某个操作
2023年10月 · 预计阅读时间: 2 分钟
#
1 起源最近遇到了个这样的需求,大概就是:点击某个按钮,进入某个页面,然后再在这个页面执行某个操作(比如请求某个接口、赋初始值啥的)。
这个需求看似简单,其实也不难。但是,我遇到了个问题,就是当在那个页面点击这个按钮的时候,因为跳转路由路径是一样的原因,页面是不会刷新的,那我怎么判断我是否我是否点击了那个按钮并且跳到了这个页面呢?
于是,我想到了路由传参,通过路由传参的方式,判断这个参数是否变化了,变化了就代表这个路由再次进入了。
#
2 解决方案用 query 的方式传参,参数附上时间戳,这样每进来一次都是不同的参数
点击按钮如下操作:
在进入的那个页面增加如下代码:
ok,经过上面的操作便可以在跳转相同路由下,监听页面刷新并执行某个操作啦。
#
3 知识扩展-关于 Vue Router 路由传参的几种常用方式说到这里,vue-router 传参的几种方式也顺便总结一下吧
#
3.1 params 传参(显示参数)浏览器里路由地址显示为这样:
声明式:
编程式:
关于参数的获取:
#
3.2 params 传参(不显示参数)由于从 Vue Router 的 2022-8-22 这次更新后,便不能再用这种方式来写,关于不显示参数的传参,可以参考下面这篇博客:
https://blog.csdn.net/m0_57033755/article/details/129927829
#
3.3 query 传参浏览器里路由地址显示为这样:
声明式:
编程式:
关于参数的获取:
#
4 结语ok ,就到这里啦,对此你有何看法或想法呢,欢迎提出讨论呀~